window.addEventListener('load', function () {
    // 左右按钮区
    var content = document.querySelector('.content')
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    content.addEventListener('mouseover', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; //清除定时器
    }) 
    content.addEventListener('mouseout', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            // 手动调用点击事件
            arrow_r.click();
        }, 5000);

    });
    // 小圆点 排他思想 动态生成小圆点 有几张图就生成几个
    // 1 创建节点creatElement('li') 2插入节点 appendChild(li)
    var ul = content.querySelector('ul');
    var ol = content.querySelector('.circle')
    for (var i = 0; i< ul.children.length; i++) {
        // 1 创建节点creatElement('li')
        var li = document.createElement('li');
        // 通过自定义属性 给li添加索引号
        li.setAttribute('index', i);
        // 2插入节点 appendChild(li)
        ol.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                // 1 干掉所有人
                ol.children[i].className = '';
            }
            // 2 留下自己
            this.className = 'current';
            // 当前点击 li 就拿到li的索引值
            var index = this.getAttribute('index');
            num = circle = index; //让又按钮 小圆点 图片的索引值一起变化
            // ul移动的距离 = 小圆点的索引值 * 图片的宽度（为负值）
            animate(ul, -index*content.offsetWidth);
        })
    }
    // 把ol的第一个li设置类名为 current
    ol.children[0].className = 'current';
    // 克隆第一张图片li 放到最后 cloneNode() 为true 深克隆
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0; 
    var circle = 0; //circle 控制小圆点的播放

    var flag = true; //节流阀

    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀

            // 如果走到最后一张图片时，我们的ul 要快速复原 left 改为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * content.offsetWidth, function () {

                flag = true; //打开节流阀
                
            });
            // 8 小圆点跟随右按钮一起变化
            circle++;
            // 当circle == 4 时，说明走到最后一个我们克隆的图片了，然后就复原
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })
    // 左按钮
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false; //关闭节流阀

            // 如果走到最后一张图片时，我们的ul 要快速复原 left 改为 0
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = - num * content.offsetWidth + 'px';
            }
            num--;
            animate(ul, -num * content.offsetWidth, function () {

                flag = true; //打开节流阀
                
            });
            // 8 小圆点跟随右按钮一起变化
            circle--;
            // 当circle == 4 时，说明走到最后一个我们克隆的图片了，然后就复原
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }
    })
    function circleChange() {
        // 利用for循环 类名为空 来 清除其余小圆点的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 自动播放轮播图
    var timer = setInterval(function () {
        // 手动调用点击事件
        arrow_r.click();
    }, 2000);
})